<template>
  <view class="container">
    <!-- 商品图片轮播 -->
    <view class="image-container">
      <swiper v-if="productImages.length" class="image-swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(img, idx) in productImages" :key="idx">
          <image :src="img" class="product-img" mode="aspectFill" @click="previewImage(img, productImages)" />
        </swiper-item>
      </swiper>
      <view v-else class="no-image">
        <text>暂无图片</text>
      </view>
      
      <!-- 右上角操作按钮 -->
      <view class="top-actions">
        <view class="action-btn" @click="toggleFavorite">
          <text class="icon">{{ isFavorite ? '❤️' : '🤍' }}</text>
        </view>
        <view class="action-btn" @click="shareProduct">
          <text class="icon">📤</text>
        </view>
      </view>
    </view>

    <!-- 商品基本信息 -->
    <view class="section">
      <view class="title-row">
        <text class="title">{{ product.title || '商品标题' }}</text>
        <view class="status-tags">
          <text v-if="product.bargainOptionName" class="tag bargain">{{ product.bargainOptionName }}</text>
          <text v-if="product.deliveryMethodName" class="tag delivery">{{ product.deliveryMethodName }}</text>
        </view>
      </view>
      
      <view class="price-row">
        <view class="price-info">
          <text class="current-price">¥{{ product.price || 0 }}</text>
          <text v-if="product.originPrice && product.originPrice > product.price" class="origin-price">原价: ¥{{ product.originPrice }}</text>
        </view>
        <view class="view-count">
          <text class="count-text">浏览 {{ viewCount }}</text>
        </view>
      </view>
    </view>

    <!-- 商品描述 -->
    <view class="section">
      <view class="section-title">商品描述</view>
      <view class="desc">{{ product.description || '暂无描述' }}</view>
    </view>

    <!-- 商品详情 -->
    <view class="section">
      <view class="section-title">商品详情</view>
      <view class="detail-list">
        <view class="detail-item">
          <text class="detail-label">分类</text>
          <text class="detail-value">{{ product.category || '未分类' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">成色</text>
          <text class="detail-value">{{ getConditionText() }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">交易方式</text>
          <text class="detail-value">{{ product.deliveryMethodName || '未设置' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">议价</text>
          <text class="detail-value" :class="{ 'bargain-yes': product.bargainOption === 2 }">
            {{ product.bargainOptionName || '不议价' }}
          </text>
        </view>
        <view class="detail-item">
          <text class="detail-label">位置</text>
          <text class="detail-value">{{ product.location || '未设置' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">发布时间</text>
          <text class="detail-value">{{ formatTime(product.createdAt) }}</text>
        </view>
      </view>
    </view>

    <!-- 卖家信息 -->
    <view class="section seller-section" @click="viewSellerProfile">
      <view class="section-title">卖家信息</view>
      <view class="seller-info">
        <image :src="getSellerAvatar()" class="seller-avatar" />
        <view class="seller-details">
          <text class="seller-name">{{ product.sellerName || '匿名用户' }}</text>
          <text class="seller-email" v-if="product.sellerEmail">{{ product.sellerEmail }}</text>
          <text class="seller-desc">{{ getSellerDesc() }}</text>
        </view>
        <view class="seller-arrow">></view>
      </view>
    </view>

    <!-- 留言交流 -->
     <view class="section">
       <view class="section-title">
         留言交流 ({{ comments.length }})
         <text class="refresh-btn" @click="loadComments">🔄</text>
       </view>
       
       <!-- 留言列表 -->
       <view class="comments-list" v-if="comments.length">
         <view class="comment-item" v-for="comment in comments" :key="comment.id">
           <view class="comment-header">
             <image :src="getUserAvatar(comment.userId)" class="comment-avatar" />
             <view class="comment-info">
               <text class="comment-user">{{ comment.userName || '匿名用户' }}</text>
               <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
             </view>
             <view class="comment-actions">
               <view class="like-btn" :class="{ active: comment.isLiked }" @click="toggleLike(comment)">
                 <text class="like-icon">{{ comment.isLiked ? '❤️' : '🤍' }}</text>
                 <text class="like-count">{{ comment.likeCount || 0 }}</text>
               </view>
             </view>
           </view>
           <view class="comment-content">{{ comment.content }}</view>
           
           <!-- 回复列表 -->
           <view class="replies" v-if="comment.replies && comment.replies.length">
             <view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
               <text class="reply-user">{{ reply.userName }}:</text>
               <text class="reply-content">{{ reply.content }}</text>
               <text class="reply-time">{{ formatTime(reply.createdAt) }}</text>
             </view>
           </view>
           
           <view class="comment-footer">
             <text class="reply-btn" @click="showReplyInput(comment)">回复</text>
           </view>
         </view>
       </view>
       
       <!-- 空状态 -->
       <view class="empty-comments" v-else>
         <text class="empty-text">暂无留言，快来抢沙发吧~</text>
       </view>
       
       <!-- 发表留言 -->
       <view class="comment-input-section">
         <view class="input-row">
           <textarea 
             class="comment-input" 
             v-model="newComment" 
             placeholder="说点什么吧..." 
             maxlength="200"
             auto-height
           />
           <button class="send-btn" @click="submitComment" :disabled="!newComment.trim()">发送</button>
         </view>
         <view class="input-footer">
           <text class="char-count">{{ newComment.length }}/200</text>
         </view>
       </view>
     </view>

     <!-- 推荐商品 -->
     <view class="section" v-if="recommendProducts.length">
       <view class="section-title">猜你喜欢</view>
       <scroll-view class="recommend-scroll" scroll-x>
         <view class="recommend-list">
           <view 
             class="recommend-item" 
             v-for="item in recommendProducts" 
             :key="item.id"
             @click="goToProduct(item.id)"
           >
             <image :src="getProductImage(item)" class="recommend-img" mode="aspectFill" />
             <text class="recommend-title">{{ item.title }}</text>
             <text class="recommend-price">¥{{ item.price }}</text>
           </view>
         </view>
       </scroll-view>
     </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-group">
        <view class="action-item" @click="contactSeller">
          <text class="action-icon">💬</text>
          <text class="action-text">私信</text>
        </view>
        <view class="action-item" @click="makeCall">
          <text class="action-icon">📞</text>
          <text class="action-text">电话</text>
        </view>
      </view>
      <view class="main-actions">
        <button class="btn-secondary" @click="addToCart">加入购物车</button>
        <button class="btn-primary" @click="buyNow">立即购买</button>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request.js';
import { API_BASE_URL } from '@/utils/config.js';
import chatManager from '@/utils/chat.js';

export default {
  data() {
    return {
      productId: null,
      product: {},
      recommendProducts: [],
      isFavorite: false,
      viewCount: 0,
      comments: [],
      newComment: '',
      replyingTo: null
    }
  },
  computed: {
    productImages() {
      // 优先使用API返回的图片数据
      if (this.product.imageUrls && this.product.imageUrls.length) {
        return this.product.imageUrls.map(img => this.fullImgUrl(img));
      }
      if (this.product.firstImageUrl) {
        return [this.fullImgUrl(this.product.firstImageUrl)];
      }
      return [];
    }
  },
  onLoad(options) {
     const id = options.id;
     if (id) {
       this.productId = id; // 保存商品ID
       this.loadProductDetail(id);
       this.loadRecommendProducts();
       this.incrementViewCount();
     } else {
       this.loadMockData();
       this.loadMockComments();
     }
   },
  methods: {
    async loadProductDetail(id) {
      try {
        const response = await request({
          url: `/api/product/${id}`
        });
        
        // 解析API响应格式
        if (response && response.code === 200 && response.data) {
          this.product = response.data;
          this.loadComments(); // 商品详情加载成功后再加载留言
        } else if (response && response.success && response.data) {
          this.product = response.data;
          this.loadComments(); // 商品详情加载成功后再加载留言
        } else {
          this.product = response || {};
        }
        
        console.log('商品详情数据:', this.product);
      } catch (error) {
        console.error('加载商品详情失败:', error);
        this.loadMockData();
        uni.showToast({ 
          title: '加载失败，使用测试数据', 
          icon: 'none' 
        });
      }
    },
    
    loadMockData() {
      this.product = {
        id: 'mock-001',
        title: '测试二手好物',
        description: '这是一个用于测试的商品描述，成色很新，功能完好。适合学生和上班族使用，性价比很高。',
        category: '数码产品',
        price: 99,
        originPrice: 299,
        deliveryMethod: 1,
        bargainOption: 2,
        deliveryMethodName: '面交',
        bargainOptionName: '可砍价',
        location: '广州天河',
        createdAt: new Date().toISOString(),
        imageUrls: [
          'https://picsum.photos/400/300?random=1',
          'https://picsum.photos/400/300?random=2',
          'https://picsum.photos/400/300?random=3'
        ],
        sellerName: '热心卖家',
        sellerId: 'seller-001'
      };
      this.viewCount = Math.floor(Math.random() * 100) + 20;
    },
    
    async loadRecommendProducts() {
      try {
        const response = await request({
          url: '/api/product/list',
          data: { page: 1, pageSize: 6 },
          showLoading: false
        });
        
        if (response && response.code === 200 && response.data && response.data.products) {
          this.recommendProducts = response.data.products.slice(0, 4);
        }
      } catch (error) {
        console.log('加载推荐商品失败:', error);
        // 使用模拟数据
        this.recommendProducts = [
          { id: 'rec1', title: '推荐商品1', price: 88, firstImageUrl: 'https://picsum.photos/200/200?random=10' },
          { id: 'rec2', title: '推荐商品2', price: 128, firstImageUrl: 'https://picsum.photos/200/200?random=11' },
          { id: 'rec3', title: '推荐商品3', price: 66, firstImageUrl: 'https://picsum.photos/200/200?random=12' },
          { id: 'rec4', title: '推荐商品4', price: 199, firstImageUrl: 'https://picsum.photos/200/200?random=13' }
        ];
      }
    },
    
    incrementViewCount() {
      // 模拟浏览量增加
      this.viewCount = Math.floor(Math.random() * 200) + 50;
    },
    
    // 获取完整图片URL
    fullImgUrl(img) {
      if (!img) return 'https://picsum.photos/400/300?random=default';
      if (img.startsWith('http')) return img;
      if (img.startsWith('/uploads/')) {
        return API_BASE_URL + img;
      }
      return img;
    },
    
    getProductImage(product) {
      if (product.firstImageUrl) {
        return this.fullImgUrl(product.firstImageUrl);
      }
      if (product.imageUrls && product.imageUrls.length) {
        return this.fullImgUrl(product.imageUrls[0]);
      }
      return `https://picsum.photos/200/200?random=${product.id}`;
    },
    
    getConditionText() {
      // 根据价格比例估算成色
      if (this.product.originPrice && this.product.price) {
        const ratio = this.product.price / this.product.originPrice;
        if (ratio > 0.8) return '九成新';
        if (ratio > 0.6) return '八成新';
        if (ratio > 0.4) return '七成新';
        return '六成新';
      }
      return '成色良好';
    },
    
    getSellerAvatar() {
      // 优先使用API返回的卖家头像，如果没有则使用随机头像
      if (this.product.sellerAvatar || this.product.userAvatar) {
        return this.fullImgUrl(this.product.sellerAvatar || this.product.userAvatar);
      }
      const sellerId = this.product.userId || this.product.sellerId || 'seller';
      return `https://picsum.photos/60/60?random=${sellerId}`;
    },
    
    getSellerDesc() {
      // 如果有卖家电话，显示电话信息
      if (this.product.sellerPhone) {
        return `联系电话: ${this.product.sellerPhone}`;
      }
      
      // 否则显示随机描述
      const descriptions = [
        '诚信卖家，已认证',
        '响应迅速，服务周到',
        '好评如潮，值得信赖',
        '专业卖家，品质保证'
      ];
      return descriptions[Math.floor(Math.random() * descriptions.length)];
    },
    
    formatTime(timeStr) {
      if (!timeStr) return '';
      
      const time = new Date(timeStr);
      const now = new Date();
      const diff = now - time;
      
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor(diff / (1000 * 60));
      
      if (days > 0) return `${days}天前`;
      if (hours > 0) return `${hours}小时前`;
      if (minutes > 0) return `${minutes}分钟前`;
      return '刚刚';
    },
    
    // 图片预览
    previewImage(current, urls) {
      uni.previewImage({
        current,
        urls
      });
    },
    
    // 收藏切换
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
      uni.showToast({
        title: this.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'none'
      });
    },
    
    // 分享商品
    shareProduct() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: `pages/productDetail/index?id=${this.product.id}`,
        title: this.product.title,
        summary: this.product.description,
        imageUrl: this.productImages[0]
      });
    },
    
    // 联系卖家
    async contactSeller() {
      // 检查是否有卖家信息，优先使用userId，其次使用sellerId 是商家信息
      const sellerId = this.product.userId;
      if (!sellerId) {
        uni.showToast({
          title: '卖家信息不完整',
          icon: 'none'
        });
        return;
      }

      try {
        // 获取当前用户ID（从本地存储获取）
        // const currentUserId = uni.getStorageSync('userId') || 'user_' + Date.now();
		const userInfo = uni.getStorageSync('userInfo')    
		const currentUserId  =userInfo.id;	
        // 确保全局WebSocket连接已建立
        if (!chatManager.isConnected()) {
          uni.showLoading({
            title: '连接中...'
          });
          await chatManager.connect(currentUserId);
          uni.hideLoading();
          
          // 连接成功提示
          uni.showToast({
            title: '已连接，进入聊天',
            icon: 'success',
            duration: 1500
          });
        } else {
          // 已经在线，直接提示
          uni.showToast({
            title: '您已在线，进入聊天',
            icon: 'success',
            duration: 1000
          });
        }
        
        // 延迟跳转，让用户看到提示
        setTimeout(() => {
          // 跳转到聊天界面
          const sellerName = this.product.sellerName || this.product.userName || '卖家';
          const sellerAvatar = this.getSellerAvatar();
          
          uni.navigateTo({
            url: `/pages/chat/chat?userId=${sellerId}&userName=${encodeURIComponent(sellerName)}&productId=${this.product.id}&avatar=${encodeURIComponent(sellerAvatar)}`
          });
        }, chatManager.isConnected() ? 800 : 1200);
        
      } catch (error) {
        uni.hideLoading();
        console.error('WebSocket连接失败:', error);
        uni.showToast({
          title: '连接失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 拨打电话
    makeCall() {
      // 检查是否有卖家电话
      if (!this.product.sellerPhone) {
        uni.showToast({
          title: '卖家未提供联系电话',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '联系卖家',
        content: `是否拨打卖家电话：${this.product.sellerPhone}？`,
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: this.product.sellerPhone
            });
          }
        }
      });
    },
    
    // 加入购物车
    addToCart() {
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      });
    },
    
    // 立即购买
    buyNow() {
      console.log('=== 点击立即购买 ===');
      console.log('商品数据:', this.product);
      console.log('商品ID:', this.product.id);
      console.log('productId变量:', this.productId);
      
      // 优先使用productId，如果没有则使用product.id
      const productId = this.productId || this.product.id;
      
      if (!productId) {
        console.log('商品ID为空，显示提示');
        uni.showToast({
          title: '商品信息加载中，请稍后',
          icon: 'none'
        });
        return;
      }
      
      console.log('准备跳转到创建订单页面，商品ID:', productId);
      
      uni.navigateTo({
        url: `/pages/order/create?productId=${productId}`,
        success: () => {
          console.log('跳转成功');
        },
        fail: (err) => {
          console.log('跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 查看卖家资料
    viewSellerProfile() {
      uni.navigateTo({
        url: `/pages/user/profile?userId=${this.product.sellerId}`
      });
    },
    
    // 跳转到其他商品
     goToProduct(productId) {
       uni.redirectTo({
         url: `/pages/productDetail/index?id=${productId}`
       });
     },
     
     // 加载留言
     async loadComments() {
       if (!this.productId) {
         console.log('商品ID不存在，无法加载留言');
         this.loadMockComments();
         return;
       }
       
       try {
         const response = await request({
           url: `/api/product/${this.productId}/comments`,
           data: { page: 1, pageSize: 20 },
           showLoading: false
         });
         
         if (response && response.code === 200 && response.data) {
           this.comments = response.data.comments || [];
         }
       } catch (error) {
         console.log('加载留言失败:', error);
         this.loadMockComments();
       }
     },
     
     // 加载模拟留言数据
     loadMockComments() {
       this.comments = [
         {
           id: 'comment1',
           userId: 'user1',
           userName: '小明',
           content: '这个商品看起来不错，成色怎么样？',
           createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
           likeCount: 3,
           isLiked: false,
           replies: [
             {
               id: 'reply1',
               userId: 'seller1',
               userName: '卖家',
               content: '成色很好，九成新，功能完全正常',
               createdAt: new Date(Date.now() - 1 * 60 * 60 * 1000).toISOString()
             }
           ]
         },
         {
           id: 'comment2',
           userId: 'user2',
           userName: '小红',
           content: '价格可以再便宜一点吗？',
           createdAt: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
           likeCount: 1,
           isLiked: true,
           replies: []
         },
         {
           id: 'comment3',
           userId: 'user3',
           userName: '小李',
           content: '支持面交吗？在哪个区域？',
           createdAt: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
           likeCount: 0,
           isLiked: false,
           replies: []
         }
       ];
     },
     
     // 提交留言
     async submitComment() {
       if (!this.newComment.trim()) {
         uni.showToast({ title: '请输入留言内容', icon: 'none' });
         return;
       }
       
       try {
         const response = await request({
           url: `/api/product/${this.productId}/comments`,
           method: 'POST',
           data: {
             content: this.newComment.trim(),
             parentId: this.replyingTo?.id
           }
         });
         
         if (response && response.code === 200) {
           uni.showToast({ title: '留言成功', icon: 'success' });
           this.newComment = '';
           this.replyingTo = null;
           this.loadComments();
         } else {
           throw new Error(response?.message || '留言失败');
         }
       } catch (error) {
         console.error('提交留言失败:', error);
         // 模拟添加留言
         const newComment = {
           id: 'comment_' + Date.now(),
           userId: 'current_user',
           userName: '我',
           content: this.newComment.trim(),
           createdAt: new Date().toISOString(),
           likeCount: 0,
           isLiked: false,
           replies: []
         };
         
         if (this.replyingTo) {
           // 添加回复
           const reply = {
             id: 'reply_' + Date.now(),
             userId: 'current_user',
             userName: '我',
             content: this.newComment.trim(),
             createdAt: new Date().toISOString()
           };
           this.replyingTo.replies = this.replyingTo.replies || [];
           this.replyingTo.replies.push(reply);
         } else {
           // 添加新留言
           this.comments.unshift(newComment);
         }
         
         this.newComment = '';
         this.replyingTo = null;
         uni.showToast({ title: '留言成功', icon: 'success' });
       }
     },
     
     // 点赞/取消点赞
     async toggleLike(comment) {
       try {
         const response = await request({
           url: `/api/product/comments/${comment.id}/like`,
           method: comment.isLiked ? 'DELETE' : 'POST'
         });
         
         if (response && response.code === 200) {
           comment.isLiked = !comment.isLiked;
           comment.likeCount = comment.isLiked ? 
             (comment.likeCount || 0) + 1 : 
             Math.max((comment.likeCount || 0) - 1, 0);
         }
       } catch (error) {
         console.log('点赞操作失败:', error);
         // 模拟点赞
         comment.isLiked = !comment.isLiked;
         comment.likeCount = comment.isLiked ? 
           (comment.likeCount || 0) + 1 : 
           Math.max((comment.likeCount || 0) - 1, 0);
       }
     },
     
     // 显示回复输入框
     showReplyInput(comment) {
       this.replyingTo = comment;
       this.newComment = `@${comment.userName} `;
       
       // 聚焦到输入框
       this.$nextTick(() => {
         const query = uni.createSelectorQuery().in(this);
         query.select('.comment-input').boundingClientRect();
         query.exec((res) => {
           if (res[0]) {
             uni.pageScrollTo({
               scrollTop: res[0].top - 100,
               duration: 300
             });
           }
         });
       });
     },
     
     // 获取用户头像（复用现有方法）
     getUserAvatar(userId) {
       if (!userId) return 'https://picsum.photos/40/40?random=default';
       return `https://picsum.photos/40/40?random=${userId}`;
     },
     
     // 关闭WebSocket连接
     closeSocket() {
       if (this.socket) {
         this.socket.close({
           success: () => {
             console.log('WebSocket连接已关闭');
           },
           fail: (err) => {
             console.log('关闭WebSocket连接失败:', err);
           }
         });
         this.socket = null;
       }
     },
     
     // 显示提示消息
     showToast(message) {
       uni.showToast({
         title: message,
         icon: 'none',
         duration: 2000
       });
     }
   }
 }
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 图片容器 */
.image-container {
  position: relative;
  background: #fff;
}

.image-swiper {
  width: 100vw;
  height: 300px;
}

.product-img {
  width: 100vw;
  height: 300px;
  object-fit: cover;
}

.no-image {
  width: 100vw;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: #999;
}

.top-actions {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
}

.action-btn {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.action-btn .icon {
  font-size: 18px;
}

/* 基础样式 */
.section {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 标题行 */
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.title {
  flex: 1;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-right: 12px;
}

.status-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
}

.tag.bargain {
  background: #FF5E5E;
}

.tag.delivery {
  background: #4CAF50;
}

/* 价格行 */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.current-price {
  color: #FF5E5E;
  font-size: 24px;
  font-weight: bold;
}

.origin-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.view-count {
  color: #999;
  font-size: 12px;
}

/* 描述 */
.desc {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* 详情列表 */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f8f8f8;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  color: #999;
  font-size: 14px;
  min-width: 80px;
}

.detail-value {
  color: #333;
  font-size: 14px;
  text-align: right;
  flex: 1;
}

.detail-value.bargain-yes {
  color: #FF5E5E;
  font-weight: bold;
}

/* 卖家信息 */
.seller-section {
  cursor: pointer;
}

.seller-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.seller-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.seller-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.seller-desc {
  font-size: 12px;
  color: #999;
}

.seller-arrow {
  color: #ccc;
  font-size: 16px;
}

/* 推荐商品 */
.recommend-scroll {
  width: 100%;
}

.recommend-list {
  display: flex;
  gap: 12px;
  padding: 0 4px;
}

.recommend-item {
  flex-shrink: 0;
  width: 120px;
  background: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.recommend-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.recommend-title {
  padding: 8px;
  font-size: 12px;
  color: #333;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-price {
  padding: 0 8px 8px;
  font-size: 14px;
  font-weight: bold;
  color: #FF5E5E;
  display: block;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

.action-group {
  display: flex;
  gap: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.action-icon {
  font-size: 20px;
}

.action-text {
  font-size: 12px;
  color: #666;
}

.main-actions {
  flex: 1;
  display: flex;
  gap: 12px;
  margin-left: 20px;
}

.btn-secondary {
  flex: 1;
  height: 44px;
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: bold;
}

.btn-primary {
  flex: 1;
  height: 44px;
  background: #FF5E5E;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: bold;
}

.btn-primary:active {
  background: #e54545;
}

.btn-secondary:active {
   background: #e0e0e0;
 }
 
 /* 留言交流样式 */
 .refresh-btn {
   float: right;
   font-size: 14px;
   color: #666;
   cursor: pointer;
 }
 
 .comments-list {
   margin-top: 16px;
 }
 
 .comment-item {
   padding: 16px 0;
   border-bottom: 1px solid #f0f0f0;
 }
 
 .comment-item:last-child {
   border-bottom: none;
 }
 
 .comment-header {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
 }
 
 .comment-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
   margin-right: 8px;
 }
 
 .comment-info {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
 .comment-user {
   font-size: 14px;
   font-weight: bold;
   color: #333;
   margin-bottom: 2px;
 }
 
 .comment-time {
   font-size: 12px;
   color: #999;
 }
 
 .comment-actions {
   display: flex;
   align-items: center;
 }
 
 .like-btn {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
   border-radius: 12px;
   background: #f5f5f5;
   cursor: pointer;
 }
 
 .like-btn.active {
   background: #ffe6e6;
 }
 
 .like-icon {
   font-size: 14px;
 }
 
 .like-count {
   font-size: 12px;
   color: #666;
 }
 
 .comment-content {
   font-size: 15px;
   color: #333;
   line-height: 1.5;
   margin-bottom: 8px;
 }
 
 .replies {
   margin-left: 40px;
   padding: 8px 12px;
   background: #f8f8f8;
   border-radius: 8px;
   margin-bottom: 8px;
 }
 
 .reply-item {
   margin-bottom: 6px;
   font-size: 14px;
   line-height: 1.4;
 }
 
 .reply-item:last-child {
   margin-bottom: 0;
 }
 
 .reply-user {
   color: #FF5E5E;
   font-weight: bold;
   margin-right: 4px;
 }
 
 .reply-content {
   color: #333;
 }
 
 .reply-time {
   color: #999;
   font-size: 12px;
   margin-left: 8px;
 }
 
 .comment-footer {
   display: flex;
   justify-content: flex-end;
 }
 
 .reply-btn {
   font-size: 12px;
   color: #666;
   cursor: pointer;
   padding: 4px 8px;
 }
 
 .reply-btn:active {
   color: #FF5E5E;
 }
 
 .empty-comments {
   text-align: center;
   padding: 40px 20px;
   color: #999;
 }
 
 .empty-text {
   font-size: 14px;
 }
 
 .comment-input-section {
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid #f0f0f0;
 }
 
 .input-row {
   display: flex;
   gap: 12px;
   align-items: flex-end;
 }
 
 .comment-input {
   flex: 1;
   min-height: 36px;
   max-height: 100px;
   padding: 8px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 18px;
   font-size: 14px;
   background: #f8f8f8;
   resize: none;
 }
 
 .comment-input:focus {
   border-color: #FF5E5E;
   background: #fff;
 }
 
 .send-btn {
   padding: 8px 16px;
   background: #FF5E5E;
   color: #fff;
   border: none;
   border-radius: 18px;
   font-size: 14px;
   font-weight: bold;
   min-width: 60px;
 }
 
 .send-btn:disabled {
   background: #ccc;
   cursor: not-allowed;
 }
 
 .input-footer {
   display: flex;
   justify-content: flex-end;
   margin-top: 8px;
 }
 
 .char-count {
   font-size: 12px;
   color: #999;
 }
 </style>